<template>
  <div class="countyApply">
    <div class="container">
      <div class="title">申请变更</div>
      <div class="dateBlock">
        <span>变更申请时间</span>
        <span class="fromTo">从</span>
        <el-date-picker
          v-model="applyStartTime"
          type="date"
          value-format="yyyy-MM-DD"
          placeholder="选择日期"
        ></el-date-picker>
        <span class="fromTo">至</span>
        <el-date-picker
          v-model="applyEndTime"
          type="date"
          value-format="yyyy-MM-DD"
          placeholder="选择日期"
        ></el-date-picker>
        <el-button type="primary" style="margin-left:10px;" @click="getList">查询</el-button>
      </div>
    </div>
    <div class="hr"></div>
    <div class="container">
      <div class="add">
        <el-button
          type="primary"
          v-if="!disabledButton"
          @click="addApply('/designChange/countyApply/contyApplyChild/addApply',{projectId:projectId,})"
        >新增</el-button>
      </div>
      <el-row class="addList" v-for="item in list" :key="item.id">
        <el-col :span="18">
          <span>变更申请时间:</span>
          <span style="color:#575859;">{{item.applyTime}}</span>
          <span style="margin-left:100px;">审查状态:</span>
          <span style="color:#575859;">{{item.auditStatusStr}}</span>
          <div>
            <span>变更原因:</span>
            <span style="color:#575859;">{{item.alterationReason}}</span>
          </div>
        </el-col>
        <el-col :span="6" style="margin-top:30px; ">
          <span
            style="padding:5px; color:#26B7FF;"
            @click="addApply('/designChange/countyApply/coutyApplyChild/detailInfo',{id:item.id,})"
          >查看</span>
          <span
            style="padding:5px; color:#26B7FF;"
            @click="addApply('/designChange/countyApply/coutyApplyChild/editApply',{id:item.id,})"
            v-if="item.auditStatus === 0"
          >编辑</span>
          <span
            style="padding:5px; color:#DD5533;"
            @click="deleteAlteration(item.id)"
            v-if="item.auditStatus === 0"
          >删除</span>
        </el-col>
      </el-row>
      <div class="no-data" v-if="!list || list.length == 0">暂无数据</div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          :hide-on-single-page="total === pageSize || total < pageSize "
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <div style="margin-top:20px;">
        <el-button type="primary" @click="startFlow" v-if="firstDataId && !disabled1">下一步</el-button>
        <span
          style="padding:5px 30px; color:#26B7FF; font-size:14px;cursor: pointer;"
          @click="startInspection"
          v-if="!disabledButton"
        >开始自验</span>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getAlterationRecordList,
  deleteAlterationRecord,
  startAuditFlow,
  startSelfInspection,
  getProjectNewestAlterationRecord
} from "@/api/project1/designChange/countyApply/index";

export default {
  data() {
    return {
      startFlowId: "",
      startInspectionId: "",
      applyStartTime: "",
      applyEndTime: "",
      list: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      projectId: localStorage.getItem("projectId") || "",
      disabled: true,
      disabledButton: true,
      disabled1: true,
      firstDataId: ""
    };
  },

  created() {
    console.log(this.$route, "PROJECT_CONSTRUCTION");
    if (this.$route.name === localStorage.getItem("key")) {
      this.disabled = false;
    }
    
    if (this.$route.name === "PROJECT_CONSTRUCTION") {
      this.disabledButton = false;
    }
    if (this.$route.name === "PROJECT_CHANGE_DIST_APPLY") {
      this.disabled1 = false;
    }

    if (localStorage.getItem("lookStatus") == 2) {
      this.disabled = true;
      this.disabledButton = false;
      this.disabled1 = true;
    }
    
    this.getNewestRecord();
    this.getList();
  },
  methods: {
    //获取设计变更记录列表
    getList: function() {
      var data={
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        projectId: this.projectId,
        applyStartTime: this.applyStartTime,
        applyEndTime: this.applyEndTime
      }
      if(data.applyStartTime && data.applyStartTime!=''){
        data.applyStartTime = data.applyStartTime + " " + "00:00:00"
      }
      if(data.applyEndTime && data.applyEndTime!=''){
        data.applyEndTime = data.applyEndTime + " " + "00:00:00"
      }
      getAlterationRecordList(data).then(res => {
        if (res.code == 1000) {
          this.list = res.data.rows;
          this.total = res.data.total;
        }
      });
    },

    // 根据项目id查询最新一条变更记录信息
    getNewestRecord() {
      getProjectNewestAlterationRecord({ projectId: this.projectId }).then(
        res => {
          if (res.code == 1000 && res.data) {
            this.firstDataId = res.data.auditStatus === 0 ? res.data.id : "";
            this.startInspectionId =
              res.data.auditStatus === 5 || res.data.auditStatus === 6
                ? res.data.id
                : "";
            this.startFlowId = res.data.auditStatus == 0 ? res.data.id : "";
          }
        }
      );
    },

    // 添加变更意见
    addApply(path, query) {
      this.$router.push({
        path: path,
        query: query
      });
    },

    //  删除变更记录
    deleteAlteration(id) {
      deleteAlterationRecord({ id: id }).then(res => {
        if (res.code == 1000) {
          this.getList();
          this.$message.success("操作成功");
        }
      });
    },

    // 下一步，开始流程
    startFlow() {
      startAuditFlow({ id: this.startFlowId }).then(res => {
        this.getList();
        this.$message.success("操作成功");
        this.$router.push("/projectManagement/projectImplementation/dealwith");
      });
    },

    // 开始自检
    startInspection() {
      if (!this.disabled) {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        startSelfInspection({ projectId: this.projectId })
          .then(res => {
            loading.close();
            this.$message({
              message: "提交成功",
              type: "success"
            });
            this.$router.push(
              "/projectManagement/projectImplementation/dealwith"
            );
          })
          .catch(err => {
            loading.close();
          });
      }
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/ .el-form--inline .el-form-item__label {
  color: #a1a1a1;
}

.countyApply {
  min-height: calc(100vh - 154px);
  background-color: #fff;
}
.container {
  padding: 20px 20px 0 20px;
}
.btn {
  margin-top: 30px;
}

.title {
  padding: 10px 0;
  line-height: 33px;
  font-size: 18px;
  color: rgba(72, 73, 77, 1);
  font-weight: 500;
}
.dateBlock {
  padding: 10px 0 20px 0;
  line-height: 33px;
  font-size: 14px;
  color: rgba(72, 73, 77, 1);
  font-weight: 500;
}
.fromTo {
  display: inline-block;
  padding: 0 20px;
  color: #999;
}
.hr {
  height: 10px;
  background: #f7f8fa;
}
.add {
  padding: 40px 0 20px 0;
  border-bottom: 1px solid #eee;
}
.addList {
  margin: 15px 0 10px 0;
  padding: 0 20px;
  width: 70%;
  border-bottom: 1px solid #eee;
  color: #a1a3a6;
  font-size: 14px;
}
.addList span {
  display: inline-block;
  padding: 15px 0;
}
</style>